<!DOCTYPE html>
<html>

<head>
    <title>Generate Images</title>
    <style>
        canvas {
            margin: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas id="product1"></canvas>
    <canvas id="product2"></canvas>
    <canvas id="gallery1"></canvas>
    <canvas id="gallery2"></canvas>
    <canvas id="gallery3"></canvas>

    <script>
        function generateImage(canvasId, width, height, gradient) {
            const canvas = document.getElementById(canvasId);
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');

            const grad = ctx.createLinearGradient(0, 0, width, height);
            gradient.forEach(([pos, color]) => grad.addColorStop(pos, color));

            ctx.fillStyle = grad;
            ctx.fillRect(0, 0, width, height);

            // Add some shapes
            ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
            ctx.beginPath();
            ctx.arc(width / 2, height / 2, Math.min(width, height) / 3, 0, Math.PI * 2);
            ctx.fill();

            // Save as image
            const link = document.createElement('a');
            link.download = canvasId + '.jpg';
            link.href = canvas.toDataURL('image/jpeg', 0.9);
            link.click();
        }

        // Generate product images
        generateImage('product1', 800, 600, [[0, '#1a1a1a'], [1, '#333']]);
        generateImage('product2', 800, 600, [[0, '#333'], [1, '#4a4a4a']]);

        // Generate gallery images
        generateImage('gallery1', 1920, 1080, [[0, '#1a1a1a'], [1, '#333']]);
        generateImage('gallery2', 1920, 1080, [[0, '#333'], [1, '#4a4a4a']]);
        generateImage('gallery3', 1920, 1080, [[0, '#4a4a4a'], [1, '#666']]);
    </script>
</body>

</html>